<template>
  <div class="app-container" style="padding:1vh 4vw">
    <el-row style="margin: 6vh 2vw;">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-input
          v-model="query"
          class="filter-item"
          clearable
          @clear="this.getAdmins"
          @blur="handleFilter"
          placeholder="输入关键字搜索"
          prefix-icon="el-icon-search"
          style="width: 70%;"
          :size="handleSize()"
        />
        <el-button class="filter-item" style="margin-left: 15px;" type="primary" icon="el-icon-edit" @click="handleCreate" :size="handleSize()">
          添加
        </el-button>
      </el-col>
    </el-row>

    <div class="table-container" style="margin: 0 2vw;">
      <el-table highlight-current-row fit :data="adminList" style="width:100%;" max-height="800" :size="handleSize()" tooltip-effect="light">
<!--        <el-table-column sortable fixed prop="id" label="ID" min-width="75" max-width="200"/>-->
        <el-table-column prop="name" label="管理员" min-width="75" max-width="400" align="center">
          <template v-slot="scope">
            <el-popover trigger="hover" placement="top" transition="el-zoom-in-bottom">
              <p>姓名: {{ scope.row.name }}</p>
              <p>学号: {{ scope.row.number }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="权限" align="center" max-width="400" min-width="100">
          <template v-slot="scope">
            <span v-for="item in scope.row.role" key="item.id">{{ item.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" max-width="400" min-width="100">
          <template v-slot="scope">
            <el-button v-show="device() !== 'mobile'" size="mini" @click="handleUpdate(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
            <el-button v-show="device() !== 'mobile'" size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete">删除</el-button>
            <el-button v-show="device() === 'mobile'" size="mini" @click="handleUpdate(scope.row)" type="primary" icon="el-icon-edit" circle/>
            <el-button v-show="device() === 'mobile'" size="mini" type="danger" @click="handleDelete(scope.row)" icon="el-icon-delete" circle/>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="device() === 'mobile'">
      <el-form :model="postForm" ref="dataForm" :rules="rules" :label-position="device() === 'mobile' ? 'top' : 'left'" label-width="70px" style="width: 300px; margin-left:50px;" :size="handleSize()">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="postForm.name" style="width: 300px" :size="handleSize()"/>
        </el-form-item>
        <el-form-item label="学号" prop="number">
          <el-input v-model="postForm.number" style="width: 300px" :size="handleSize()"/>
        </el-form-item>
        <el-form-item label="权限" prop="role">
          <el-select v-model="role" class="filter-item-role" placeholder="请选择权限" style="width: 300px" :size="handleSize()">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false" :size="handleSize()">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()" :size="handleSize()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeAdmin, deleteAdmin, getExistRole, getRole, indexAdmin } from '@/api/admin/admin'
import { indexRole } from '@/api/admin/role'

const defaultForm = {
  id: undefined,
  name: '',
  number: ''
}

export default {
  data() {
    return {
      currentPage: undefined,
      lastPage: 0,
      total: 0,
      perPage: 0,
      postForm: Object.assign({}, defaultForm),
      dialogStatus: '',
      dialogFormVisible: false,
      query: '',
      role: '',
      adminList: [],
      roleList: [],
      textMap: {
        create: '创建',
        update: '编辑'
      },
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
        number: [{ required: true, message: '必填', trigger: 'blur' }],
        // role: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  created() {
    // 从服务器端获取 管理员列表 和 角色列表
    this.currentPage = 1
    this.getAdmins()
    this.getRoles()
  },
  methods: {
    // 获取 管理员列表
    async getAdmins() {
      const res = await indexAdmin({ page: this.currentPage })
      let adminList = res.data.data
      for (const adminListKey in adminList) {
        adminList[adminListKey]['role'] = await this.getExistRoles(adminList[adminListKey].id)
      }
      this.adminList = adminList
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 获取 角色列表
    async getRoles() {
      const res = await indexRole()
      this.roleList = res.data.data
    },
    // 获取 单个角色
    async getExistRoles(id) {
      const res = await getExistRole({id :id})
      return res.data
    },
    // 搜索
    async handleFilter() {
      if (this.query !== '') {
        const res = await indexAdmin({ name: this.query, page: this.currentPage })
        this.adminList = res.data.data
        this.currentPage = res.data.currentPage
        this.lastPage = res.data.lastPage
        this.total = res.data.total
        this.perPage = res.data.perPage
      } else {
        this.getAdmins()
      }
    },
    // 创建管理员
    handleCreate() {
      // 清空数据
      this.postForm = Object.assign({}, defaultForm)
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    // 编辑管理员
    handleUpdate(row) {
      //  复制对象
      this.postForm = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    // 删除管理员
    handleDelete(row) {
      this.$confirm('确定删除此活动', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          deleteAdmin({ id: row.id }).then(async() => {
            this.getAdmins()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 创建数据
    async createData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          changeAdmin({ name: this.postForm.name, number: this.postForm.number }).then(() => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            // 重新获取数据
            this.getAdmins()
          })
        } else {
          console.log('发布失败!!')
          this.$notify({
            title: '失败',
            message: '创建失败',
            type: 'danger',
            duration: 2000
          })
        }
      })
      this.loading = false
      this.dialogFormVisible = false
    },
    // 更新数据
    async updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          changeAdmin({ id: this.postForm.id, name: this.postForm.name, number: this.postForm.number }).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            // 重新获取数据
            this.getAdmins()
          })
        } else {
          console.log('发布失败!!')
          this.$notify({
            title: '失败',
            message: '修改失败',
            type: 'danger',
            duration: 2000
          })
        }
      })
      this.dialogFormVisible = false
      this.loading = false
    },
    // 获取 当前设备类型
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备类型控制 尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 分页
    change(e) {
      this.currentPage = e
      this.getAdmins()
    }
    // 根据管理员学号获取 管理员角色
    // async getRole(id) {
    //   const res = await getRole({ id: id })
    //   return res.data[0].name
    //   //console.log(res.data[0]);
    //   return res.data;
    // },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin-top: 30px;
  //margin-left: 2rem;
  //margin-right: 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

  .filter-container {
    //margin-right: 30px;
    //margin-left: 30px;
    //margin-top: 30px;
  }
}

//.button {
//  position: relative;
//  width: 150px;
//  height: 40px;
//  cursor: pointer;
//  display: flex;
//  align-items: center;
//  //border: 1px solid #0078E8;
//  border: 1px solid #409EFF;
//  border-radius: 5px;
//  background-color: #409EFF;
//  //background-color: #0082FC;
//  overflow: hidden;
//}
//
//.button, .button__icon, .button__text {
//  transition: all 0.3s;
//}
//
//.button .button__text {
//  transform: translateX(30px);
//  color: #fff;
//  font-weight: 550;
//}
//
//.button .button__icon {
//  position: absolute;
//  transform: translateX(109px);
//  height: 100%;
//  width: 39px;
//  background-color: #0078E8;
//  display: flex;
//  align-items: center;
//  justify-content: center;
//}
//
//.button .svg {
//  width: 20px;
//  fill: #fff;
//}
//
//.button:hover {
//  background: #0078E8;
//}
//
//.button:hover .button__text {
//  color: transparent;
//}
//
//.button:hover .button__icon {
//  width: 148px;
//  transform: translateX(0);
//}
//
//.button:active .button__icon {
//  background-color: #0077C2;
//}
//
//.button:active {
//  border: 1px solid #0077C2;
//}


//.button {
//  position: relative;
//  width: 150px;
//  height: 38px;
//  cursor: pointer;
//  display: flex;
//  align-items: center;
//  border: 1px solid #409EFF;
//  background-color: #409EFF;
//  border-radius: 5px;
//  //background-color: #0082FC;
//
//  //border: 1px solid #34974d;
//  //background-color: #3aa856;
//}
//
//.button, .button__icon, .button__text {
//  transition: all 0.3s;
//}
//
//.button .button__text {
//  transform: translateX(30px);
//  color: #fff;
//  font-family: sans-serif;
//  font-size: 14px;
//  font-weight: 500;
//}
//
//.button .button__icon {
//  position: absolute;
//  transform: translateX(109px);
//  height: 100%;
//  width: 39px;
//  background-color: #0078E8;
//  //background-color: #34974d;
//  display: flex;
//  align-items: center;
//  justify-content: center;
//}
//
//.button .svg {
//  width: 30px;
//  stroke: #fff;
//}
//
//.button:hover {
//  background: #0078E8;
//  //background: #34974d;
//}
//
//.button:hover .button__text {
//  color: transparent;
//}
//
//.button:hover .button__icon {
//  width: 148px;
//  transform: translateX(0);
//}
//
//.button:active .button__icon {
//  background-color: #0077C2;
//  //background-color: #2e8644;
//}
//
//.button:active {
//  border: 1px solid #0077C2;
//  //border: 1px solid #2e8644;
//}
</style>

<!--{-->
<!--id: 11,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--college: '经济学院',-->
<!--role: '编辑者'-->
<!--}-->
<!--, {-->
<!--id: 11,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--college: '经济学院',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 12,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--college: '管理学院',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 13,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '管理学院',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 14,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '国际商学院',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 15,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '国际商学院',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 16,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '国际商学院',-->
<!--role: '超级管理员'-->
<!--}, {-->
<!--id: 17,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '国际商学院',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 18,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '计算机工程学院暨大数据学院',-->
<!--role: '访问者'-->
<!--}, {-->
<!--id: 19,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '国际商学院',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 20,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--college: '外国语学院',-->
<!--role: '管理员'-->
<!--}-->

<!--{-->
<!--id: 1,-->
<!--name: '王小虎',-->
<!--number: '202210089001',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 2,-->
<!--name: '王小虎',-->
<!--number: '202210089002',-->
<!--role: '访问者'-->
<!--}, {-->
<!--id: 3,-->
<!--name: '王小虎',-->
<!--number: '202210089003',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 4,-->
<!--name: '王小虎',-->
<!--number: '202210089004',-->
<!--role: '超级管理员'-->
<!--}, {-->
<!--id: 5,-->
<!--name: '王小虎',-->
<!--number: '202210089005',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 6,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--college: '土木工程学院',-->
<!--role: '管理员'-->
<!--}, {-->
<!--id: 7,-->
<!--name: '王小虎',-->
<!--number: '202210089007',-->
<!--role: '编辑者'-->
<!--}, {-->
<!--id: 8,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--role: '超级管理员'-->
<!--}, {-->
<!--id: 9,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--role: '访问者'-->
<!--}, {-->
<!--id: 10,-->
<!--name: '王小虎',-->
<!--number: '202210089006',-->
<!--role: '访问者'-->
<!--}-->
